<template>
  <div class="dialog">
    <div class="dialog_div" @click.stop>
      <!-- <div class="dialog_top">
        <div v-if="this.newTreeData.module.name == 'deptName'">部门</div>
        <div v-else>类别信息</div>
        <i @click="onCancel" class="el-icon-close"></i>
      </div>-->
      <!-- 部门 -->
      <div class="dialog_middle" v-if="this.newTreeData.module.name == 'deptName'">
        <el-form
          ref="ruleForm"
          :model="newTreeForm"
          :rules="rules"
          label-width="70px"
          label-position="left"
        >
          <el-form-item label="上级部门" prop="superiorId">
            <div style="margin-left: 20px;">
              <el-select
                v-model="newTreeForm.superiorId"
                filterable
                placeholder="请选择"
                style="width:100%;"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item[newTreeData.module.name]"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="部门名称" prop="lbmc">
            <el-input
              @blur="getNameToPinying"
              v-model="newTreeForm.lbmc"
              style="padding-left: 20px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门编码" prop="lbbm">
            <el-input v-model="newTreeForm.lbbm" style="padding-left: 20px;"></el-input>
          </el-form-item>
          <el-form-item label="拼音码" prop="pym">
            <el-input v-model="newTreeForm.pym" style="padding-left: 20px;"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="pxm">
            <el-input v-model="newTreeForm.pxm" style="padding-left: 20px;"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 类别 -->
      <div class="dialog_middle" v-else>
        <el-form
          ref="ruleForm"
          :model="newTreeForm"
          :rules="rules"
          label-width="70px"
          label-position="left"
        >
          <el-form-item label="上级类别" prop="superiorId">
            <div style="margin-left: 20px;">
              <el-select
                v-model="newTreeForm.superiorId"
                filterable
                placeholder="请选择"
                style="width:100%;"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item[newTreeData.module.name]"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="类别名称" prop="lbmc">
            <el-input
              @blur="getNameToPinying"
              v-model="newTreeForm.lbmc"
              style="padding-left: 20px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="类别编码" prop="lbbm">
            <el-input v-model="newTreeForm.lbbm" style="padding-left: 20px;"></el-input>
          </el-form-item>
          <el-form-item label="拼音码" prop="pym">
            <el-input v-model="newTreeForm.pym" style="padding-left: 20px;"></el-input>
          </el-form-item>
          <el-form-item label="排序码" prop="pxm">
            <el-input v-model="newTreeForm.pxm" style="padding-left: 20px;"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog_bottom">
        <el-button type="primary" @click="onSubmit('ruleForm')" :loading="submitLoading">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { postAction, putAction, getAction } from '@/api/manage'
export default {
  props: {
    newTreeData: Object,
  },
  data () {
    return {
      newTreeForm: {},
      rules: {
        lbmc: [{ required: true, message: '请输入类别名称', trigger: ['blur', 'change'] }],
      },
      options: [],
      submitLoading: false,
    }
  },
  watch: {
    'newTreeData.state': {
      handler () {
        console.log(this.newTreeData);
        if (this.newTreeData.state == 'add') {
          this.newTreeForm = {
            id: '',
            superiorId: this.newTreeData.data.id === '' ? '0' : this.newTreeData.data.id,
            lbmc: '',
            lbbm: '',
            pym: '',
            pxm: '',
          }
        } else if (this.newTreeData.state == 'edit') {
          this.newTreeForm = {
            id: this.newTreeData.data.id,
            superiorId: this.newTreeData.data.parentId || this.newTreeData.data.pid,
            lbmc: this.newTreeData.data[this.newTreeData.module.name],
            lbbm: this.newTreeData.data[this.newTreeData.module.code],
            pym: this.newTreeData.data[this.newTreeData.module.pyCode],
            pxm: this.newTreeData.data[this.newTreeData.module.indexCode],
          }
        }
        this.getTreeData()
        console.log(this.newTreeForm);
      },
      deep: true,
    },
  },
  computed: {
  },
  created () {
    this.getTreeData()
    if (this.newTreeData.state == 'add') {
      this.newTreeForm = {
        id: '',
        superiorId: this.newTreeData.data.id === '' ? '0' : this.newTreeData.data.id,
        lbmc: '',
        lbbm: '',
        pym: '',
        pxm: '',
      }
    } else if (this.newTreeData.state == 'edit') {
      console.log(this.newTreeData);
      this.newTreeForm = {
        id: this.newTreeData.data.id,
        superiorId: this.newTreeData.data.parentId || this.newTreeData.data.pid,
        lbmc: this.newTreeData.data[this.newTreeData.module.name],
        lbbm: this.newTreeData.data[this.newTreeData.module.code],
        pym: this.newTreeData.data[this.newTreeData.module.pyCode],
        pxm: this.newTreeData.data[this.newTreeData.module.indexCode],
      }
    }
  },
  methods: {
    getTreeData () {
      getAction(this.newTreeData.getTreeUrl, {}).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.options = res.result
          let all = {
            id: '0'
          }
          all[this.newTreeData.module.name] = '全部'
          this.options.splice(0, 0, all)
          console.log(this.options);
          if (this.newTreeData.state == 'edit') {
            this.getDistabledTreeData(this.newTreeForm.id)
          }
        }
      })
    },
    getDistabledTreeData (pid) {
      for (let index = 0; index < this.options.length; index++) {
        let element = this.options[index];
        if (element.id == pid) {
          element.disabled = true
        } else if (element.pid == pid) {
          element.disabled = true
          if (element.hasChild == 1) {
            this.getDistabledTreeData(element.id)
          }
        }
      }
    },
    // 转换拼音码
    getNameToPinying (event) {
      this.newTreeForm.pym = this.$pinyin.getJp(event.target.value)
    },
    // 保存并向父组件发射修改后数据
    onSubmit (ruleForm) {
      this.submitLoading = true
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          let data = {}
          if (this.newTreeData.module.name == 'companyTypeName') {
            // 往来单位的类别新增
            data['id'] = this.newTreeForm.id
            data['pid'] = this.newTreeForm.superiorId
            data['companyTypeName'] = this.newTreeForm.lbmc
            data['companyCode'] = this.newTreeForm.lbbm
            data['companyPinyinCode'] = this.newTreeForm.pym
            data['companyIndexCode'] = this.newTreeForm.pxm
          } else if (this.newTreeData.module.name == 'goodsTypeName') {
            // 商品信息的类别新增
            data['id'] = this.newTreeForm.id
            data['pid'] = this.newTreeForm.superiorId
            data['goodsTypeName'] = this.newTreeForm.lbmc
            data['typeCode'] = this.newTreeForm.lbbm
            data['pinYinCode'] = this.newTreeForm.pym
            data['indexCode'] = this.newTreeForm.pxm
          } else if (this.newTreeData.module.name == 'storehouseTypeName') {
            // 仓库信息的类别新增
            data['id'] = this.newTreeForm.id
            data['pid'] = this.newTreeForm.superiorId
            data['storehouseTypeName'] = this.newTreeForm.lbmc
            data['typeCode'] = this.newTreeForm.lbbm
            data['pinyinCode'] = this.newTreeForm.pym
            data['indexCode'] = this.newTreeForm.pxm
          } else if (this.newTreeData.module.name == 'deptName') {
            // 员工信息的部门类别新增
            data['id'] = this.newTreeForm.id
            data['parentId'] = this.newTreeForm.superiorId
            data['deptName'] = this.newTreeForm.lbmc
            data['deptCode'] = this.newTreeForm.lbbm
            data['pinYinCode'] = this.newTreeForm.pym
            data['backup'] = this.newTreeForm.pxm //备注
          } else if (this.newTreeData.module.name == 'typeName') {
            // 账户信息的类别新增
            data['id'] = this.newTreeForm.id
            data['pid'] = this.newTreeForm.superiorId
            data['typeName'] = this.newTreeForm.lbmc
            data['typeCode'] = this.newTreeForm.lbbm
            data['pinYinCode'] = this.newTreeForm.pym
            data['indexCode'] = this.newTreeForm.pxm //备注
          }
          console.log(data);
          if (this.newTreeData.state == 'add') {
            postAction(this.newTreeData.addTreeUrl, data).then((res) => {
              this.submitLoading = false
              if (res.code === 200) {
                this.$elMessage.success(res.message);
                this.$emit('onSaveTreeChanges', res.code)
              } else {
                this.$elMessage({
                  showClose: true,
                  message: res.message,
                  type: 'error',
                  iconClass: 'el-icon-warning-outline',
                  duration: 3000,
                })
              }
            })
          } else if (this.newTreeData.state == 'edit') {
            if (this.newTreeData.module.name == 'typeName') {
              // 账户类别编辑
              postAction(this.newTreeData.editTreeUrl, data).then((res) => {
                this.submitLoading = false
                if (res.code === 200) {
                  this.$elMessage.success(res.message);
                  this.$emit('onSaveTreeChanges', res.code)
                } else {
                  this.$elMessage.error(res.message)
                }
              })
            } else {
              // 其他类别编辑
              putAction(this.newTreeData.editTreeUrl, data).then((res) => {
                this.submitLoading = false
                if (res.code === 200) {
                  this.$elMessage.success(res.message);
                  this.$emit('onSaveTreeChanges', res.code)
                } else {
                  this.$elMessage.error(res.message)
                }
              })
            }
          }
        } else {
          // this.$elMessage({
          //   showClose: true,
          //   message: '请输入类别名称',
          //   type: 'error',
          //   iconClass: 'el-icon-warning-outline',
          //   duration: 3000,
          // })
          this.submitLoading = false
          return false
        }
      })
    },
    // 取消
    onCancel () {
      this.$emit('onCancelTree', this.columnData)
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .dialog_div .el-form-item {
  margin-bottom: 22px;
}

.dialog_div {
  background: #fff;

  .dialog_top {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;

    div {
      font-size: 14px;
      color: #666;
      font-weight: 600;
    }

    .el-icon-close {
      color: #999;
      // font-size: 0.48753rem;
    }
  }

  .dialog_middle {
    padding-bottom: 0;
    box-sizing: border-box;
    padding: 0 10px;
    overflow: auto;
    font-size: 13px;
  }

  .dialog_bottom {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;

    ::v-deep .el-button {
      width: 70px;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

::v-deep .el-form-item {
  .el-form-item__label {
    width: auto;
    min-width: 70px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666;
    text-align: justify;
    text-justify: distribute-all-lines;
    /*ie6-8*/
    text-align-last: justify;
    /* ie9*/
    -moz-text-align-last: justify;
    /*ff*/
    -webkit-text-align-last: justify;
    /*chrome 20+*/
    position: relative;

    &::before {
      position: absolute;
      right: 0;
      margin-right: 20px;
      color: #ff0000;
      font-weight: 600;
    }
  }

  .el-form-item__content {
    .el-form-item__error {
      margin-left: 20px;
    }
  }
}
</style>